<style lang="less">
@import "listRecord.less";
</style>
<style lang="less" scoped>
@import "../../../assets/css/applyList.less";
</style>
<template>
    <div class="listRecord search applyList">
        <Form ref="searchForm" :model="searchForm" inline :label-width="140" class="search-form rui-query-form">
            <div class="applyQuerySearchRow">
                <div class="applyQueryHead"></div>
                <div class="applyQuerySearchItem">
                    <Form-item label="" prop="socUniCrtCode">
                        <div>
                            <Input prefix="ios-search" type="text" v-model="searchForm.vin" @keyup.enter.native="handleSearch" clearable placeholder="VIN号"
                            />
                            <a :style="{display:'block',width:'40px',lineHeight: '24px',marginLeft: '16px'}"  @click="dropDown">
                                {{dropDownContent}}
                                <Icon :type="dropDownIcon"></Icon>
                            </a>
                        </div>
                    </Form-item>
                </div>
            </div>
            <div v-if="drop" class="applyQuerySearchMore table-card">
                <div  class="applyQuerySearchMoreRow">
                    <div class="rui-query-form-item">
                        <Form-item label="车辆类型" prop="carType">
                            <Select v-model="searchForm.carType" placeholder="请选择" clearable >
                                <Option v-for="item in carTypeList" :value="item.value" :key="item.value">{{ item.title }}
                                </Option>
                            </Select>
                        </Form-item>
                    </div>
                    <div class="rui-query-form-item">
                        <Form-item label="状态" prop="status">
                            <Select v-model="searchForm.status" placeholder="请选择" clearable >
                                <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.title }}
                                </Option>
                            </Select>
                        </Form-item>
                    </div>
                    <div class="rui-query-form-item">
                        <Form-item label="申请时间">
                            <DatePicker v-model="selectDate" type="daterange" format="yyyy-MM-dd" clearable
                                        @on-change="selectDateRange" placeholder="选择起始时间" ></DatePicker>
                        </Form-item>
                    </div>
                </div>
                <div style="text-align: center">
                    <Button @click="handleSearch" type="primary">查询</Button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <Button @click="handleReset">重置</Button>
                </div>
            </div>
        </Form>
        <div class="table-card">
            <div class="btn-status flex flex-between">
                <div class="loanApplyBtn">
                    <Button v-has="'button_register_add'" @click="add" class="btn" size="default">添加</Button>
                    <Button v-has="'button_register_stop'" @click="upAll" class="btn" type="error" size="default">批量停用</Button>
                    <!-- <Button @click="getChannelListingCarTemp" icon="md-refresh">刷新</Button> -->
                    <circleLoading v-if="operationLoading" />
                </div>
            </div>
            <div class="rui-table-box">
                <Table :loading="loading" :columns="columns" :data="data" sortable="custom"
                       @on-sort-change="changeSort" @on-selection-change="showSelect" ref="table">
                    <template slot-scope="{ row }" slot="brand">
                        <a  type="primary" size="small" @click="see(row)">{{row.brand}}
                        </a>
                    </template>
                    <template slot-scope="{ row }" slot="validityDays">
                        <span style="color: blue;">{{getNewDays(row.createTime,row.validityDays)}}</span>
                    </template>

                    <template slot-scope="{ row }" slot="carType">
                        <div v-if="row.carType == '01'">
                            乘用车
                        </div>
                        <div v-if="row.carType == '02'">
                            商用车
                        </div>
                    </template>
                    <template slot-scope="{ row }" slot="status">
                        <Badge v-if="row.status==='00'" text="启用" color="#67c23a"/>
                        <Badge v-if="row.status==='01'" text="审核中" color="#999"/>
                        <Badge v-if="row.status==='02'" text="草稿" color="#999"/>
                        <Badge v-if="row.status==='03'" text="退回" color="#e6a23c"/>
                        <Badge v-if="row.status==='04'" text="拒绝" color="#e6a23c"/>
                        <Badge v-if="row.status==='05'" text="停用" color="#f56c6c"/>

<!--                        <div v-if="row.status == '00'">-->
<!--                            <Tag color="success" size="default">启用</Tag>-->
<!--                        </div>-->
<!--                        <div v-if="row.status == '01'">-->
<!--                            <Tag color="warning" size="default">待审核</Tag>-->
<!--                        </div>-->
<!--                        <div v-if="row.status == '02'">-->
<!--                            <Tag color="default" size="default">草稿</Tag>-->
<!--                        </div>-->
<!--                        <div v-if="row.status == '03'">-->
<!--                            <Tag color="success" size="default">退回</Tag>-->
<!--                        </div>-->
<!--                        <div v-if="row.status == '04'">-->
<!--                            <Tag color="success" size="default">拒绝</Tag>-->
<!--                        </div>-->
<!--                        <div v-if="row.status == '05'">-->
<!--                            <Tag color="error" size="default">停用</Tag>-->
<!--                        </div>-->
                    </template>
                    <template slot-scope="{ row }" slot="action">
                <span v-if="row.status=='02'||row.status=='05'||row.status=='03'">
                  <Button style="margin-right:5px" type="primary" size="small" @click="edit(row)">编辑
                  </Button>
                </span>
                        <span v-if="row.status!='02'&&row.status!='05'&&row.status!='03'">
                  <Button disabled style="margin-right:5px" type="primary" size="small" @click="edit(row)">编辑
                  </Button>
                </span>
                        <span v-if="row.status!='02'">
                  <Button v-has="'button_register_del'" disabled type="error" size="small" @click="remove(row)">删除</Button>
                </span>
                        <span v-if="row.status=='02'">
                  <Button v-has="'button_register_del'" type="error" size="small" @click="remove(row)">删除</Button>
                </span>
                    </template>
                </Table>
            </div>
            <br/>
            <Row type="flex" justify="end">
                <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
                      @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]" size="small"
                      show-total show-elevator show-sizer></Page>
            </Row>
        </div>
    </div>
</template>

<script>
import {
  getApplyChannelListingCarTemp,
  getChanneldeleteChannel,
  edit,
  delAllByIds,
  channelUpAllByIds,
  getChannelBaseInfo,
  getChannelId
} from "@/projects/afs-apply/api/register-mng/listRecord";
import { getDictDataByType } from "@/projects/basic/api/admin/datadic";

import circleLoading from "_c/circle-loading/circle-loading.vue";

export default {
  name: "list-record",
  components: {
    circleLoading
  },
  data() {
    const validateMobile = (rule, value, callback) => {
      var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!reg.test(value)) {
        callback(new Error("手机号格式错误"));
      } else {
        callback();
      }
    };
    return {
      baseInfo: [],
      statusList: [], // 状态的数据字典
      carTypeList: [], // 车辆类型数据字典

      loading: true, // 应该是转圈圈的
      dpLoading: false, // 部门树加载
      operationLoading: false, // 应该是也转圈圈的
      drop: false,
      dropDownContent: "更多",
      dropDownIcon: "ios-arrow-down", // 应该是换图标的
      selectCount: 0, // 搜索选择的数量
      selectList: [], //  复选框  选中的集合
      // 搜索的集合
      searchForm: {
        vin: "", // vin号
        carType: "", // 车辆类型 乘用车/商用车
        status: "", // 状态 启用； 审核中； 已提交； 草稿
        channelId: "", // 合作商ID
        pageNumber: 1,
        pageSize: 10,
        startDate: "",
        endDate: ""
      },

       // 历史的所有集合
      hisSearchForm: {
        vin: "", // vin号
        carType: "", // 车辆类型 乘用车/商用车
        status: "", // 状态 启用； 审核中； 已提交； 草稿
        channelId: "", // 合作商ID
        pageNumber: 1,
        pageSize: 10,
        startDate: "",
        endDate: ""
      },

      selectDate: null, // 时间选择器
      modalType: 0, // 判断是添加还是修改
      userModalVisible: false, // 判断模态窗用的

      submitLoading: false, //应该还是转圈圈的
      columns: [
        {
          type: "selection",
          minWidth: 60,
          maxWidth: 60,
          align: "center",
          fixed: "left",
          _disabled: true
        },
        {
          title: "序号",
          type: "index",
          minWidth: 80,
          align: "center",
          fixed: "left"
        },
        {
          title: "所有人",
          key: "ownerName",
          align: "center",
          minWidth: 180,
          fixed: "left"
        },
        {
          title: "VIN号",
          key: "vin",
          align: "center",
          minWidth: 200,
          ellipsis: true, // 开启后，文本将不换行，超出部分显示为省略号
          tooltip: true // 鼠标放上去提示
        },
        {
          title: "品牌",
          key: "brand",
          align: "center",
          minWidth: 200,
          slot: "brand"
        },
        {
          title: "车辆类型",
          key: "carType",
          align: "center",
          minWidth: 115,
          slot: "carType"
        },
        {
          title: "车型",
          key: "model",
          align: "center",
          minWidth: 200
        },
        {
          title: "表显里程",
          key: "apparentMileage",
          align: "center",
          minWidth: 100
        },
        {
          title: "状态",
          key: "status",
          align: "center", // 设置剧中
          minWidth: 100,
          slot: "status" // 锁定标志   table 里回找到这个同名参数  进行关联
        },
        {
          title: "创建时间",
          key: "createTime",
          align: "center",
          sortable: true, // 排序
          minWidth: 120
        },
        {
          title: "审批备注",
          key: "startStopReason",
          align: "center",
          minWidth: 200,
          ellipsis: true, // 开启后，文本将不换行，超出部分显示为省略号
          tooltip: true // 鼠标放上去提示
        },
        {
          title: "操作",
          key: "action",
          minWidth: 200,
          align: "center",
          fixed: "right",
          slot: "action"
        }
      ],
      data: [],
      total: 0
    };
  },
  watch: {
    $route(to, from) {
      if (
        from.path.indexOf("register-add") > -1 ||
        from.path.indexOf("register-edit") > -1 ||
        from.path.indexOf("register-examine") > -1
      ) {
        this.handleReset();
      }
    }
  },
  methods: {
    init() {
      this.getChannelId();

      this.getBaseInfo();
      this.getChannelStatus();
      this.getChannelCarType();
    },
    // 获取渠道id
    getChannelId(){
      // this.searchForm.channelId='4436432111308005376';
      // this.getChannelListingCarTemp();
      getChannelId({}).then(res => {
        if (res.code === "0000") {
          this.searchForm.channelId = res.data;
          this.getChannelListingCarTemp();
        }
      });

    },
    // 点击下面分页调用的方法
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.hisSearchForm.pageNumber =v;
      // this.getChannelListingCarTemp();
      this.getHisChannelListingCarTemp();
      this.clearSelectAll();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.hisSearchForm.pageSize =v;
      // this.getChannelListingCarTemp();
      this.getHisChannelListingCarTemp();
      this.clearSelectAll();
    },
    // 时间选择器调用的
    selectDateRange(v) {
      if (v) {
        this.searchForm.startDate = v[0]+" 00:00:00";
        this.searchForm.endDate = v[1]+" 23:59:59";
      }
    },
    // 获取状态数据字典
    getChannelStatus() {
      let param = {
        type: "channelStatus"
      };
      getDictDataByType(param.type).then(res => {
        if (res.code === "0000") {
          this.statusList = res.data;
        }
      });
    },
    // 获取车辆类型数据字典
    getChannelCarType() {
      let param = {
        type: "channelCarType"
      };
      getDictDataByType(param.type).then(res => {
        if (res.code === "0000") {
          this.carTypeList = res.data;
        }
      });
    },

    // 数据列表查询
    getChannelListingCarTemp() {
      console.log("第一次看id:"+this.searchForm.channelId)
      if(this.searchForm.channelId==null||this.searchForm.channelId==undefined||this.searchForm.channelId==""){
        console.log("第二次看id:"+this.searchForm.channelId)
        // this.$Message.warning("登录用户渠道信息不正确！");
        return;
      }
      if(this.searchForm.vin!=null&&this.searchForm.vin!=undefined!=""){
        this.searchForm.vin=this.searchForm.vin.replace(/\s*/g,"");
      }
      getApplyChannelListingCarTemp(this.searchForm).then(res => {
        this.loading = false;
        if (res.code === "0000") {
          this.data = res.data.records;
          this.total = res.data.total;
        }
      });
    },

    // 根据历史条件查询数据列表
    getHisChannelListingCarTemp() {
      console.log("第一次看id:"+this.hisSearchForm.channelId)
      if(this.hisSearchForm.channelId==null||this.hisSearchForm.channelId==undefined||this.hisSearchForm.channelId==""){
        console.log("第二次看id:"+this.hisSearchForm.channelId)
        // this.$Message.warning("登录用户渠道信息不正确！");
        return;
      }
      if(this.hisSearchForm.vin!=null&&this.hisSearchForm.vin!=undefined!=""){
        this.hisSearchForm.vin=this.hisSearchForm.vin.replace(/\s*/g,"");
      }
      getApplyChannelListingCarTemp(this.hisSearchForm).then(res => {
        this.loading = false;
        if (res.code === "0000") {
          this.data = res.data.records;
          this.total = res.data.total;
        }
      });
    },

    // 获取合作商信息接口
    getBaseInfo() {
      getChannelBaseInfo({status:""}).then(res => {
        this.loading = false;
        if (res.code === "0000") {
          this.baseInfo = res.data;
        }
      });
    },

    // 点击搜索调用的方法
    handleSearch() {
      this.searchForm.pageNumber = 1;

      // 把搜索的条件赋值给历史搜索记录
      this.hisSearchForm.vin=this.searchForm.vin;
      this.hisSearchForm.carType=this.searchForm.carType;
      this.hisSearchForm.status=this.searchForm.status;
      this.hisSearchForm.channelId=this.searchForm.channelId;
      this.hisSearchForm.pageNumber=this.searchForm.pageNumber;
      this.hisSearchForm.pageSize=this.searchForm.pageSize;
      this.hisSearchForm.startDate=this.searchForm.startDate;
      this.hisSearchForm.endDate=this.searchForm.endDate;
      this.getChannelListingCarTemp();
    },
    // 重置搜索
    handleReset() {
      this.$refs.searchForm.resetFields();
      this.searchForm.pageNumber = 1;
      this.selectDate = null;
      this.searchForm.startDate = "";
      this.searchForm.endDate = "";

      // 把搜索的条件赋值给历史搜索记录
      this.hisSearchForm.vin=this.searchForm.vin;
      this.hisSearchForm.carType=this.searchForm.carType;
      this.hisSearchForm.status=this.searchForm.status;
      this.hisSearchForm.channelId=this.searchForm.channelId;
      this.hisSearchForm.pageNumber=this.searchForm.pageNumber;
      this.hisSearchForm.pageSize=this.searchForm.pageSize;
      this.hisSearchForm.startDate=this.searchForm.startDate;
      this.hisSearchForm.endDate=this.searchForm.endDate;
      this.getChannelId();
    },
    // 点击列表时间
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order === "normal") {
        this.searchForm.order = "";
      }
      this.getChannelListingCarTemp();
    },

    // 点击添加
    add() {
      this.afs.newTab(
        this,
        "projects/afs-apply/pages/register-mng/list-add-edit/listAddEdit",
        "挂牌车新增:",
        "ios-add",
        { type: 1 },
        "register-add",
        [],
        true
      );
    },
    // 点击编辑
    edit(v) {
      if (v.status == "00") {
        this.$Message.warning("启用不可以编辑！");
        return;
      }
      if (v.status == "01") {
        this.$Message.warning("审核中不可以编辑！");
        return;
      }
      if (v.status == "04") {
        this.$Message.warning("拒绝不可以编辑！");
        return;
      }
      let params = {
        id: v.id,
        type: 2
      };
      this.afs.newTab(
        this,
        "projects/afs-apply/pages/register-mng/list-add-edit/listAddEdit",
        "挂牌车修改:"+v.ownerName,
        "ios-add",
        params,
        "register-edit"+v.id,
        [],
        true
      );
    },

    // 点击查看
    see(v) {
      let params = {
        id: v.id,
        type: 3
      };
      this.afs.newTab(
        this,
        "projects/afs-apply/pages/register-mng/list-add-edit/listAddEdit",
        "挂牌车查看:"+v.ownerName,
        "ios-add",
        params,
        "register-see"+v.id,
        [],
        true
      );
    },

    // 这个是计算是否停用
    getNewDays(a, b) {
      if (b != null && b != undefined && b != "") {
        var time = b * 86400000;
        var startDate = a;
        startDate = startDate.replace(new RegExp("-", "gm"), "/");
        var startDateM = new Date(startDate).getTime(); //得到毫秒数
        var validityDays = startDateM + time;
        // 获取当天0点的毫秒数
        var startTime1 = new Date(new Date().toLocaleDateString()).getTime(); // 当天0点
        if (Number(startTime1) >= validityDays) {
          return "已停用";
        }

        var date = new Date(validityDays);

        var year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
        var month = date.getMonth() + 1; //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
        var day = date.getDate(); //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
        var hours = date.getHours(); //小时 ,返回 Date 对象的小时 (0 ~ 23)
        var minutes = date.getMinutes(); //分钟 ,返回 Date 对象的分钟 (0 ~ 59)
        var seconds = date.getSeconds(); //秒 ,返回 Date 对象的秒数 (0 ~ 59)
        //修改月份格式
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        //修改日期格式
        if (day >= 0 && day <= 9) {
          day = "0" + day;
        }
        //修改小时格式
        if (hours >= 0 && hours <= 9) {
          hours = "0" + hours;
        }
        //修改分钟格式
        if (minutes >= 0 && minutes <= 9) {
          minutes = "0" + minutes;
        }
        //修改秒格式
        if (seconds >= 0 && seconds <= 9) {
          seconds = "0" + seconds;
        }
        //格式(yyyy-mm-dd hh:mm:ss)
        var currentFormatDate = year + "-" + month + "-" + day;
        return b + "天";
      } else {
        return "";
      }
    },

    // 删除方法
    remove(v) {
      if (v.status != "02") {
        this.$Message.warning("只有草稿状态才可以删除!");
        return;
      }
      this.$Modal.confirm({
        title: "确认删除",
        content: "您确认要删该信息吗 ?",
        onOk: () => {
          this.operationLoading = true;
          getChanneldeleteChannel({ id: v.id }).then(res => {
            this.operationLoading = false;
            if (res.code === "0000") {
              this.$Message.success("删除成功");
              this.getChannelListingCarTemp();
            }
          });
        }
      });
    },
    down(v) {
      this.$Message.success("暂不支持下载!");
    },
    // 点击展开和收起
    dropDown() {
      if (this.drop) {
        this.dropDownContent = "更多";
        this.dropDownIcon = "ios-arrow-down";
      } else {
        this.dropDownContent = "收起";
        this.dropDownIcon = "ios-arrow-up";
      }
      this.drop = !this.drop;
    },

    // table  里的搜索
    showSelect(e) {
      console.log(e);
      this.selectList = e;
      this.selectCount = e.length;
    },
    //  点击清空的方法
    clearSelectAll() {
      this.$refs.table.selectAll(false);
    },

    // 批量删除
    upAll() {
      if (this.selectCount <= 0) {
        this.$Message.warning("您还未选择要停用的数据");
        return;
      }
      for (var i = 0; i < this.selectList.length; i++) {
        if (this.selectList[i].status != "00") {
          this.$Message.warning("只有启用的才可以停用，请重新选择！");
          this.clearSelectAll();
          return;
        }
      }
      this.$Modal.confirm({
        title: "确认停用",
        content: "您确认要停用所选的 " + this.selectCount + " 条数据?",
        onOk: () => {
          let ids = [];
          this.selectList.forEach(function(e) {
            ids += e.id + ",";
          });
          ids = ids.substring(0, ids.length - 1);
          this.operationLoading = true;
          channelUpAllByIds(ids).then(res => {
            this.operationLoading = false;
            if (res.code === "0000") {
              this.$Message.success("停用成功");
              this.clearSelectAll();
              this.getChannelListingCarTemp();
            }
          });
        }
      });
    }
  },
  // 初始化加载的方法
  mounted() {
    this.init();
  }
};
</script>
